<template>
  <div class="right">
    <div class="tou">
      <div class="zuo">{{ $t('价格') }}</div>
      <div>{{ $t('数量') }}</div>
    </div>
    <div class="flexbox">
      <div class="flex">
        <div
          v-for="(item, index) in (realTimeDepth[symbol] && realTimeDepth[symbol].asks.slice(0, 4).reverse())"
          :key="`asks-${index}`"
          class="shu"
          @click="pickPrice(item[0])"
        >
          <div class="zuo">{{ item[0] }}</div>
          <div>{{ item[1] }}</div>
        </div>
      </div>
      <div
        v-if="realTimeQuotes[symbol] && coinPair"
        class="die flex-fixed"
        @click="pickPrice(realTimeQuotes[symbol].last)"
      >
        {{ realTimeQuotes[symbol].last | priceFormat(coinPair.decimals) }}
      </div>
      <div class="flex">
        <div
          v-for="(item, index) in (realTimeDepth[symbol] && realTimeDepth[symbol].bids.slice(0, 4))"
          :key="`bids-${index}`"
          class="shu lv"
          @click="pickPrice(item[0])"
        >
          <div class="zuo">{{ item[0] }}</div>
          <div>{{ item[1] | numberFormat() }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState, mapGetters } from 'vuex'
export default {
  computed: {
    ...mapState({
      symbol: ({ exchange }) => exchange.symbol,
      realTimeDepth: ({ exchange }) => exchange.realTimeDepth,
      realTimeQuotes: ({ market }) => market.realTimeQuotes
    }),
    ...mapGetters({
      coinPair: 'market/coinPair'
    })
  },
  watch: {
    symbol (val) {
      if (val) {
        this.subscribeDepth({
          symbol: val,
          interval: this.coinPair.interval
        })
      }
    }
  },
  beforeMount () {
    this.subscribeDepth({
      symbol: this.symbol,
      interval: this.coinPair.interval
    })
  },
  methods: {
    ...mapActions({
      subscribeDepth: 'exchange/subscribeDepth'
    }),
    pickPrice (price) {
      this.$emit('clickPrice', price)
    }
  }
}
</script>
<style scoped>
.flexbox {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 242px;
}
.flex {
  flex: 1;
}
.flex-fixed {
  height: 52px;
}
</style>
